<template>
  <keep-alive>
    <component :is="component" :key="component"></component>
  </keep-alive>
</template>

<script>
  import { defineComponent, ref, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import { LayoutType } from '@/data/enum/layout';
  import Page404 from '@/views/pages/system/404.vue';
  import MainLayout from './main.vue';
  import HomeLayout from './home.vue';
  import AppLayout from './app.vue';
  import SingleLayout from './single.vue';
  export default defineComponent({
    name: 'AdminPage',
    components: { Page404, MainLayout, HomeLayout, AppLayout, SingleLayout },
    setup() {
      const route = useRoute();
      const component = ref('Page404');
      watch(
        () => route.fullPath,
        () => {
          if (Object.values(LayoutType).includes(route?.params?.layout)) {
            component.value = 'MainLayout';
          }
          /* switch (route?.params?.layout) {
            case LayoutType.MAIN:
              component.value = 'MainLayout';
              break;
            case LayoutType.HOME:
              component.value = 'HomeLayout';
              break;
            case LayoutType.APP:
              component.value = 'AppLayout';
              break;
            case LayoutType.SINGLE:
              component.value = 'SingleLayout';
              break;
          } */
        },
        {
          immediate: true,
        },
      );
      return { component };
    },
  });
</script>
